<!--
 * @Descripttion: 
 * @version: 
 * @Author: mmzhang
 * @Date: 2021-07-21 10:45:02
 * @LastEditTime: 2022-12-09 09:59:50
-->
<template>
  <div class="clue-report">
    <dt-search ref="search" :labelWidth="100" @reset="onReset">
    </dt-search>
    <Tabs type="card" v-model="showTab" :animated="false" @on-click="onChangeTab">
      <TabPane label="全部" name="0">
      </TabPane>
      <TabPane label="手动录入" name="1">
      </TabPane>
      <TabPane label="案场营销" name="2">
      </TabPane>
    </Tabs>
    <div>
      <div class="flex flex-horizontal-between flex-vertical-center">
        <ul class="total-msg flex">
          <li v-for="(item,index) in clueTotal" :key="index"
            @click="checkFun(item.params,index)"
            :class="['hand',{'line':(index==2 || index==3|| index==6)},{'selected':checkParams==item.params}]">
            <p class="value">{{Number(clueData[item.key])}}</p>
            <p class="name">{{item.name}}</p>
          </li>
        </ul>
        <div>
          <Button type="primary" @click="adjustHeader()">调整表头排序</Button>
          <Button type="primary" style="margin-left: 8px" v-if="unlocking('0213010200')"
            @click="exportExcelFun('1')">导出</Button>
          <Button type="primary" style="margin-left: 8px" v-if="unlocking('0213010100')"
            @click="exportExcelFun('0')">导出Excel</Button>
        </div>
      </div>
      <dt-grid ref='table' :columns="columns" :page="page" :onFetch='onFetch'></dt-grid>
    </div>

    <Modal v-model="detailsFlag" title="客户详情" width="80%" :styles="{ top: '5%' }"
      :footer-hide="true" @on-cancel="markCancel">
      <detail-page v-if="detailsFlag" :detailsParams="detailsParams"></detail-page>
    </Modal>
    <!--表头排序-->
    <dynamic-header ref="dynamicHeader" @fieldCancel="fieldCancel" @headUpdate="headUpdate"
      :sourcedata="sourcedata" :targetdata="targetdata"></dynamic-header>
  </div>
</template>
<script>
  import columnOpt from '../casemanagement/allCustomersManagement/clueRecord/opt/column'
  import ClueTotal from './components/clueOpt'
  import dt from '@dt/dt'
  import clueSearch from './components/clueSearch'
  import detailPage from '../casemanagement/allCustomersManagement/details.vue'
  import dynamicHeader from '@/components/dynamicHeader.vue'
  import businessCommonMgr from '@/biz/businessReport/businessCommon'
  import clueCustomerMgr from '@/biz/customer/clueCustomer.js'
  export default {
    data() {
      return {
        showTab: '0',
        formValidate: {
          officeIds: [],
          buildingName: ''
        },
        detailsFlag: false,
        detailsParams: {},
        columns: [],
        filterParams: {},
        totalParams: {},
        checkParams: '',
        clueTotal: [],
        clueData: {
          clueSum: 0,
          effectiveParam: [],
          effectiveSum: 0,
          failureParam: [],
          failureSum: 0,
          invalidParam: [],
          invalidSum: 0,
          noDistributionParam: [],
          noDistributionSum: 0,
          pushErrorParam: [],
          pushErrorSum: 0,
          pushSuccessParam: [],
          pushSuccessSum: 0,
          visitParam: [],
          visitSum: 0
        },
        page: {
          current: 1
        },
        customerClueRecordIds: [],
        sourcedata: [],
        targetdata: []
      }
    },
    watch: {},
    components: {
      detailPage,
      dynamicHeader
    },
    created() {
      columnOpt.sendThis(this)
      this.getHeadList()
      this.clueTotal = new ClueTotal(this).options()
    },
    mounted() {
      clueCustomerMgr.getChannel(false)
      this.$refs.table.init(this)
      this.$refs.search.init(this.$refs.table, new clueSearch(this).options(), this
        .formValidate)
    },
    methods: {
      adjustHeader() {
        this.$refs.dynamicHeader.show()
      },
      fieldCancel() {
        this.$refs.dynamicHeader.hide()
      },
      headUpdate(params) {
        businessCommonMgr
          .reportHeadUpdate({
            headType: 4,
            updateHead: params.updateInfo
          })
          .then((res) => {
            this.getHeadList()
            this.$refs.dynamicHeader.hide()
          })
          .catch((err) => {

          })
      },
      onChangeTab() {
        this.checkParams = ''
        this.$refs.table.fetch(true)
      },
      getHeadList() {
        businessCommonMgr
          .reportHeadList({
            headType: 4
          })
          .then((res) => {
            this.sourcedata = res.hideHead
            this.targetdata = res.showHead
            this.targetdata.forEach((item, index) => {
              item.disabled = item.fixed
            })
            this.columns = []
            let baseColumns = columnOpt.columns
            this.targetdata.forEach(item => {
              let column = baseColumns.filter(baseItem => item.fieldKey == baseItem
                .field.split('_')[baseItem
                  .field.split('_').length - 1]
              )
              if (column.length) {
                column[0].field = item.fieldKey
                this.columns.push(column[0])
              }
            })
            console.log(this.columns, '线索记录')
            this.columns.push(baseColumns[baseColumns.length - 1])
            this.$refs.table.init(this)
            this.$refs.table.fetch()
          })
          .catch((err) => {

          })
      },
      // 导出
      exportExcelFun(mask) {
        let params = {
          ...this.filterParams,
          maskCustomerPhone: mask
        }
        clueCustomerMgr.recordListExport(params)
      },
      // 线索数据
      getClueData() {
        let params = Object.assign(this.totalParams)
        // 统计
        return clueCustomerMgr.culeCount1(params).then(res => {
          this.clueData = { ...res }
        }).catch(err=>{
          this.clueData = {
            clueSum: 0,
            effectiveParam: [],
            effectiveSum: 0,
            failureParam: [],
            failureSum: 0,
            invalidParam: [],
            invalidSum: 0,
            noDistributionParam: [],
            noDistributionSum: 0,
            pushErrorParam: [],
            pushErrorSum: 0,
            pushSuccessParam: [],
            pushSuccessSum: 0,
            visitParam: [],
            visitSum: 0
          }
        })
      },
      // 重置
      onReset() {
        this.checkParams = ''
        this.customerClueRecordIds = []
      },

      onFetch(data) {
        let obj = {
          officeIds: data.officeIds
        }
        console.log(data, '22');
        this.$dt.session.set("officeIdObj", JSON.stringify(obj))
        this.customerClueRecordIds = []

        let params = Object.assign(data)
        params.sourceType = this.showTab == '0' ? null : this.showTab

        this.totalParams = { ...params }
        //
        this.getClueData()

        // this.customerClueRecordIds = (this.checkParams != '' && this.checkParams !=
        //     'clueSumParam') ?
        //   this.clueData[this
        //     .checkParams] : null

        // params.customerClueRecordIds = this.customerClueRecordIds


        if (this.checkParams == 'pushSuccessParam') {
          params.cluePushStatus = 1
        } else if (this.checkParams == 'pushErrorParam') {
          params.cluePushStatus = 2
        } else if (this.checkParams == 'noDistributionParam') {
          params.distributionStatus = 1
        } else if (this.checkParams == 'effectiveParam') {
          params.effectiveStatus = 1
        } else if (this.checkParams == 'invalidParam') {
          params.effectiveStatus = 2
        } else if (this.checkParams == 'failureParam') {
          params.effectiveStatus = 3
        } else if (this.checkParams == 'visitParam') {
          params.isVisit = 1
        }
        this.filterParams = { ...params }
        return clueCustomerMgr.culeRecordList1(params).then(res => {
          return {
            total: res.total,
            list: res.records
          }
        }).catch(err=>{
          return {
            total: 0,
            list: []
          }
        })
      },
      checkFun(params, index) {
        console.log(params, index, 'aaaaaaaaaaa');

        if (this.checkParams == params) {
          this.checkParams = ''
          this.customerClueRecordIds = []
        } else {
          this.checkParams = params
          this.customerClueRecordIds = this.clueData[params]
        }
        this.$refs.table.fetch(true)
      },
      getDetail(row) {
        //  if (rows.hasCustomer) {
        //   this.detailsFlag = true
        //   this.detailsParams = {
        //     customerId: row.customerId,
        //     userCustomerId: row.bindingUserCustomerId?row.bindingUserCustomerId:row.userCustomerId,
        //     buildingId: row.buildingId,
        //     userId: row.userId,
        //     cityCode: row.cityId,
        //   }        
        // } else {
        //   this.detailsFlag = true
        //   this.detailsParams = {
        //     flag: 'clue',
        //     customerId: row.customerId,
        //     userCustomerId: rows.bindingUserCustomerId?rows.bindingUserCustomerId:rows.userCustomerId,
        //     userId: row.userId,
        //     buildingId: row.buildingId,
        //     cityCode: row.cityId
        //   }
        // }
        // // 判断线索客户 还是案场客户
        if (row.hereto == '1') {
          this.detailsFlag = true
          this.detailsParams = {
            flag: 'clue',
            customerId: row.customerId,
            userCustomerId: row.userCustomerId,
            userId: row.userId,
            buildingId: row.buildingId,
            cityCode: row.cityId
          }
        } else {
          this.detailsFlag = true
          this.detailsParams = {
            customerId: row.customerId,
            userCustomerId: row.userCustomerId,
            buildingId: row.buildingId,
            userId: row.userId,
            cityCode: row.cityId,
          }
        }
      },
      markCancel() {
        this.detailsFlag = false
      }
    },
  }
</script>
<style lang="scss" scoped>
  .clue-report {
    padding: 20px;
    width: 100%;

    .line {
      padding-right: 20px;
      border-right: 1px #dcdee2 solid;
    }

    .total-msg {
      margin-bottom: 20px;

      li {
        margin-right: 30px;

        .name {
          color: #666;
        }

        .value {
          font-size: 24px;
          margin-bottom: 10px;
          color: #222;
          font-weight: bold;
          text-align: center;
        }
      }

      .selected {
        .name {
          color: #2d8cf0;
        }

        .value {
          color: #2d8cf0;
        }
      }
    }
  }
</style>